const lineWidths = [100, 92, 84, 76, 68, 52, 40];

Component({
  options: {
    addGlobalClass: true,
    multipleSlots: true
  },

  properties: {
    loading: {
      type: Boolean,
      value: true
    },
    lines: {
      type: Number,
      value: 3
    },
    avatar: {
      type: Boolean,
      value: false
    },
    avatarShape: {
      type: String,
      value: 'circle'
    },
    avatarSize: {
      type: Number,
      value: 96
    },
    animated: {
      type: Boolean,
      value: true
    }
  },

  data: {
    lineArray: []
  },

  lifetimes: {
    attached() {
      this.refreshLines();
    }
  },

  observers: {
    lines() {
      this.refreshLines();
    }
  },

  methods: {
    refreshLines() {
      const count = Math.max(1, Math.min(this.properties.lines, 7));
      const widths = [];
      for (let i = 0; i < count; i += 1) {
        widths.push(lineWidths[i] || lineWidths[lineWidths.length - 1]);
      }
      this.setData({ lineArray: widths });
    }
  }
});
